<style scoped>
.line {
  position: absolute;
}
.line .cursor {
  width: 7px;
  position: relative;
  left: -4px;
  cursor: e-resize;
}
.line .cursor .click {
  width: 3px;
  height: 58px;
  background-color: #535353;
  margin: 0 auto;
  border-radius: 50%;
}
.moveing .cursor .click {
  background-color: #409eff;
}
</style>
<!--  -->
<template>
  <div :class="{'line':true, 'moveing': ismoveing }" @mousedown="mousedown($event)">
    <div class="cursor">
      <div class="click"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    moving: {
      type: Function
    },
    stepOffset: {
      type: String
    },
    param: {
      type: Object
    }
  },
  data () {
    return {
      // 是否在移动
      ismoveing: false,
      left: 0,
      top: 0,
      opst: {
        x: 0
      },
      paramData: null
    }
  },
  methods: {
    mousedown (ev) {
      this.ismoveing = true
      let _this = this
      let lwidth = parseFloat(this.param.col[this.param.index - 1].config.width)
      let rwidth = parseFloat(this.param.col[this.param.index].config.width)
      let lw = ev.currentTarget.parentElement.previousElementSibling.offsetWidth
      let rw = ev.currentTarget.parentElement.offsetWidth
      let mouseDownX = ev.clientX
      let index = this.param.index
      let moving = this.moving
      document.onmousemove = function (ev) {
        let maxRW = parseInt(mouseDownX) + rw
        let maxLW = parseInt(mouseDownX) - lw
        let evCMX = parseInt(ev.clientX)

        let lmw = lw + (evCMX - parseInt(mouseDownX)) // 左侧宽度
        let rmw = rw + (parseInt(mouseDownX) - evCMX) // 右侧宽度

        // 当出现负数时 or 超过允许的最大宽度时，不进行赋值
        if (lmw > 0 && rmw > 0 && evCMX > maxLW && evCMX < maxRW) {
          let llw = parseFloat(((lmw * 1.00) / (lmw + rmw)) * (lwidth + rwidth)).toFixed(2)
          let lrw = parseFloat(((rmw * 1.00) / (lmw + rmw)) * (lwidth + rwidth)).toFixed(2)
          let param = null
          param = {
            index: index,
            lvalue: llw,
            rvalue: lrw
          }
          moving(param)
        }
      }
      document.onmouseup = function (ev) {
        document.onmousemove = null
        _this.ismoveing = false
      }
    }
  }
}

</script>
